<template>
    <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
        <el-menu :default-active="currentOption" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#F0F0F0" active-text-color="#111">
          <el-menu-item index="color">纯色</el-menu-item>
          <el-submenu index="linear">
            <template slot="title">渐变</template>
            <el-menu-item index="linear">线性渐变</el-menu-item>
            <el-menu-item index="radial">径向渐变</el-menu-item>
          </el-submenu>
          <el-menu-item index="texture">纹理</el-menu-item>
          <el-menu-item index="image">图片</el-menu-item>
          <el-menu-item index="custom">自定义</el-menu-item>
        </el-menu>
        <div class="box">
        <el-form label-position="left" label-width="70px" v-model="rawBackground">
            <el-form-item v-if="this.rawBackground.option === 'color'" label="颜色">
              <el-color-picker v-model="rawBackground.color" @active-change="pureColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="this.rawBackground.option === 'linear'" label="渐变角度">
              <el-input-number v-model="rawBackground.linear.angle" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item v-if="this.rawBackground.option === 'linear'" label="起始色">
              <el-color-picker v-model="rawBackground.linear.start" @active-change="linearStartColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="this.rawBackground.option === 'linear'" label="终止色">
              <el-color-picker v-model="rawBackground.linear.end" @active-change="linearEndColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="this.rawBackground.option === 'radial'"  label="形状">
              <el-select v-model="rawBackground.radial.shape" placeholder=" ellipse" size="mini">
                <el-option label="椭圆" value=" ellipse"/>
                <el-option label="圆" value="circle"/>
              </el-select>
            </el-form-item>
            <el-form-item v-if="this.rawBackground.option === 'radial'" label="起始色">
              <el-color-picker v-model="rawBackground.radial.start" @active-change="radialStartColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item v-if="this.rawBackground.option === 'radial'" label="终止色">
              <el-color-picker v-model="rawBackground.radial.end" @active-change="radialEndColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item  v-if="this.rawBackground.option === 'custom'" label="自定义">
              <el-input v-model="rawBackground.custom" size="mini"></el-input>
            </el-form-item>
            <!-- <el-form-item v-if="this.rawBackground.option === 'texture'"  label="平铺">
              <el-select v-model="rawBackground.image.repeat" placeholder="repeat" size="mini">
                <el-option label="平铺" value="repeat"/>
                <el-option label="水平平铺" value="repeat-x"/>
                <el-option label="垂直平铺" value="repeat-y"/>
                <el-option label="无平铺" value="no-repeat"/>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item  v-if="this.rawBackground.option === 'image'" label="水平位置">
              <el-input v-model="rawBackground.image.x" size="mini"></el-input>
            </el-form-item>
            <el-form-item  v-if="this.rawBackground.option === 'image'" label="垂直位置">
              <el-input v-model="rawBackground.image.y" size="mini"></el-input>
            </el-form-item>
            <el-form-item  v-if="this.rawBackground.option === 'image'" label="宽度">
              <el-input v-model="rawBackground.image.width" size="mini"></el-input>
            </el-form-item>
            <el-form-item  v-if="this.rawBackground.option === 'image'" label="高度">
              <el-input v-model="rawBackground.image.height" size="mini"></el-input>
            </el-form-item> -->
            <el-button  v-if="this.rawBackground.option === 'texture'"  size="mini" @click="uploadTexture" type="primary" plain>更换图片</el-button>
            <el-button  v-if="this.rawBackground.option === 'image'"  size="mini" @click="uploadImage" type="primary" plain>更换图片</el-button>
            <input type="file" ref="image" @change="changeImage" class="image" style="display: none" accept=".jpeg,.jpg,.png">
            <input type="file" ref="texture" @change="changeTexture" class="texture" style="display: none" accept=".jpeg,.jpg,.png">
          </el-form>
      </div>
    </el-drawer>
</template>
<script>
/* const { dialog } = require('electron').remote
const { nativeImage } = require('electron') */

export default {
  data () {
    return {
      drawer: false,
      currentOption: 'color'
    }
  },
  computed: {
    rawBackground () {
      return this.$store.state.rawBackground
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      this.$store.state.rawBackground.option = key
    },
    pureColor (val) {
      this.rawBackground.color = val
    },
    linearStartColor (val) {
      this.rawBackground.linear.start = val
    },
    linearEndColor (val) {
      this.rawBackground.linear.end = val
    },
    radialStartColor (val) {
      this.rawBackground.radial.start = val
    },
    radialEndColor (val) {
      this.rawBackground.radial.end = val
    },
    uploadImage () {
      this.$refs.image.click()
    },
    uploadTexture () {
      this.$refs.texture.click()
    },
    changeImage () {
      const file = this.$refs.image.files[0]
      const reader = new FileReader()
      reader.addEventListener('load', () => {
        // convert image file to base64 string
         this.rawBackground.image.src = reader.result
      }, false)
      if (file) {
        reader.readAsDataURL(file)
      }
    },
    changeTexture () {
      const file = this.$refs.texture.files[0]
      const reader = new FileReader()
      reader.addEventListener('load', () => {
        // convert image file to base64 string
         this.rawBackground.texture.src = reader.result
      }, false)
      if (file) {
        reader.readAsDataURL(file)
      }
    }
    /* changeImage () {
      // electorn 方法
      var options = {
        title: '图片',
        properties: ['openFile'],
        filters: [
          { name: 'Images', extensions: ['jpg', 'jpeg', 'png'] }
        ]
      }
      dialog.showOpenDialog(options).then(result => {
        if (!result.canceled) {
          console.log(result)
          console.log(result.filePaths)
          var logo = nativeImage.createFromPath(result.filePaths[0])
          console.log(logo.toDataURL())
          this.rawBackground.image.src = logo.toDataURL()
        }
      }).catch(err => {
        console.log(err)
      })
    } */
  },
  mounted () {
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
  .box {
    padding: 10px 20px
  }
</style>
